window.onload=function(){
    let lis=document.getElementsByTagName('li');  //获取li元素放在lis数组里
    let oText=document.getElementById('text');   
    let oDiv=document.getElementById('out');  

    // 点击时生成一个img元素
    let targetLi=null;
    let img=document.createElement('img');
    img.src="./img/dele.png";

    // 拖拽功能
    for(var i=0;i<lis.length;i++){
        lis[i].ondragstart=function(ev){
            this.style.background='blue';   //让li显示新的背景色
            targetLi=this;
            ev.dataTransfer.setData('Text',this.innerHTML);
            ev.dataTransfer.setDragImage(img,20,20);
        }
        lis[i].ondragend=function(){
            this.style.background="";
        }
    }

    // 阻止默认事件
    oDiv.ondragover=function(ev){
        ev.preventDefault();
    }

    // 增加文字提示，删除的是哪个
    oDiv.ondrop=function(ev){
        let text=ev.dataTransfer.getData('Text');
        console.log(text);
        oText.innerHTML="删除的是："+text;
        targetLi.parentNode.removeChild(targetLi);
    }
}